<template>
  <div id="Signin">
    <div class="image">
      <img src="@/assets/email/login.png" alt="" />
    </div>
    <div class="name-password">
      <div class="div">
        <p>用户名</p>
        <input
          type="text"
          v-model="login.mobile"
          placeholder="用户名"
          @blur="inputUser"
        />
      </div>
      <div class="div">
        <p>密码</p>
        <input
          type="text"
          v-model="login.password"
          placeholder="密码"
          @blur="inputPass"
        />
      </div>
      <div class="div1">
        <span>找回密码</span>
        <span @click="$router.push('/register')">注册/验证密码登录</span>
      </div>
      <div class="button">
        <button @click="dengLu">登录</button>
      </div>
    </div>
    <div class="di-san-fang">
      <h2>第三方登录</h2>
      <div class="snafang">
        <div>
          <img src="@/assets/email/pay-wx.png" alt="" />
          <span>微信登录</span>
        </div>
        <div>
          <img src="@/assets/email/QQ.png" alt="" />
          <span>QQ登录</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getLogin } from "./yibu/my";
const res = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
const reg = /^[a-zA-Z0-9_-]{4,16}$/;
export default {
  data() {
    return {
      login: {
        mobile: "",
        password: "",
        type: 1,
        client: 1,
      },
    };
  },
  methods: {
    inputUser() {
      if (!res.test(this.login.mobile)) {
        this.$Toast("请写出正确用户名");
      }
    },
    inputPass() {
      if (!reg.test(this.login.password)) {
        this.$Toast("密码不正确");
      }
    },
    async dengLu() {
      if (!res.test(this.login.mobile) && !reg.test(this.login.password)) {
        this.$Toast("用户或密码不正确");
      } else {
        let res = await getLogin(this.login)
        console.log(res);
        if(res.data.code==200){
          localStorage.setItem("Token",res.data.data.remember_token);
          this.$router.push("/my");
        }else{
          this.$Toast(res.data.msg)
        }
        
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#Signin {
  width: 100%;
  height: 100%;
  .image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
  }
  .name-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    .div {
      width: 80%;
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      p {
        width: 20%;
      }
      input {
        border: none;
        padding-left: 50px;
      }
    }
    .div1 {
      width: 80%;
      display: flex;
      justify-content: space-between;
      color: rgba(0, 0, 0, 0.5);
      margin-top: 5px;
    }
    .button {
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        border: none;
        border-radius: 30px;
        width: 70%;
        height: 50px;
        color: white;
        background: url("@/assets/email/login-btn.png") no-repeat 100%;
      }
    }
  }
  .di-san-fang {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .snafang {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      div {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.5);
        margin-top: 20px;
        img {
          width: 40px;
        }
        span {
          padding-left: 6px;
        }
      }
    }
  }
}
</style>